<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="adddrug system">
            <home-bar :currentPage='currentPage'></home-bar>
            <div class="adddrugs system-main">
                <div class="main-position">
                    首页 > 药品管理 > 品牌库
                </div>
                <div class="main-height"></div>
                <div class="main-mains">
                    <div class="main-top-nav">
                        <ul>
                            <li>
                                <router-link to="/druglistai/stockmanagement" @click.native="addPath('/druglistai/stockmanagement','药品管理');">
                                    进货管理
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/druglistai/xiajia" @click.native="addPath('/druglistai/xiajia','药品管理');">
                                    已下架
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/druglistai/deleteddrugs" @click.native="addPath('/druglistai/deleteddrugs','药品管理');">
                                    已删除药品
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/druglistai/shortageofdrugs" @click.native="addPath('/druglistai/shortageofdrugs','药品管理');">
                                    缺货药品
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/druglistai/willexpire" @click.native="addPath('/druglistai/willexpire','药品管理');">
                                    即将过期
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/druglistai/expired" @click.native="addPath('/druglistai/expired','药品管理');">
                                    已过期
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/druglistai/lackdrug" @click.native="addPath('/druglistai/lackdrug','药品管理');">
                                    库存预警
                                </router-link>
                            </li>
                            <li>
                                <router-link to="/productcategorymgmt" @click.native="addPath('/productcategorymgmt','药品管理');">
                                    产品种类管理
                                </router-link>
                            </li>
                            <li class="active">
                                <router-link to="/brandlibrary" @click.native="addPath('/brandlibrary','药品管理');">
                                    品牌库
                                </router-link>
                            </li>
                        </ul>
                    </div>
                    <!-- 加载gif图 -->
                    <div class="loadingGif" v-show="showLoadingGif"><img src="../../images/loading.gif" alt=""></div>
                    <!-- 加载gif图 -->
                    <div class="drugListMain" v-show="!showLoadingGif">
                        <div class="headOperation">
                            <a href="javascript:void(0);" class="OperationA-application" @click="clickAddBrand">申请添加品牌</a>
                        </div>
                        <!--/.headOperation -->
                        <div class="drugListTable">
                            <table>
                                <tr>
                                    <td>序号</td>
                                    <td>品牌名称</td>
                                    <td>品牌图片</td>
                                    <td>品牌描述</td>
                                    <td>药品数量</td>
                                </tr>
                                <tr v-for="(trading,index) in tableList" :key="index">
                                    <td width="100">{{index + 1}}</td>
                                    <td>{{trading.brand_name}}</td>
                                    <td>
                                        <img :src="trading.image_url" alt="" class="trImg">
                                    </td>
                                    <td>{{trading.description}}</td>
                                    <td>{{trading.total}}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="pageBotom">
                            <div class="pageBotomRight">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage4" :page-size="20" layout="total, prev, pager, next" :total="totalNumOfArticle">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 弹窗开始 -->
            <div class="system-menban" v-show="showSystemPopup"></div>
            <div class="systemPopup" v-show="showSystemPopup">
                <div class="topTitle">
                    <span>{{systemPopupTitle}}</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <!-- 添加品牌弹窗 -->
                <!-- <div class="addBrandPopup clear" v-show="showAddBrandPopup">
                                <div class="clear">
                                    <div class="contentOne">
                                        <div class="clear">
                                            <span>品牌名称</span>
                                            <el-input v-model="AddBrandList.brandNameValue" placeholder="请输入内容"></el-input>
                                        </div>
                                        <div class="clear">
                                            <span>品牌简述</span>
                                            <el-input type="textarea" v-model="AddBrandList.brandDescValue" placeholder="请输入内容"></el-input>
                                        </div>
                                        <div class="clear">
                                            <span>公司网址</span>
                                            <el-input v-model="AddBrandList.webSiteValue" placeholder="请输入内容"></el-input>
                                        </div>
                                    </div>
                                    <div class="contentTwo">
                                        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                            <img v-if="AddBrandList.imageUrl" :src="AddBrandList.imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                        <h3>品牌图片</h3>
                                        <div>请上传200*200分辨率的图片，支持png,jpeg格式</div>
                                    </div>
                                </div>
                                <div class="system-messagebox1-btn clear">
                                    <div @click="determineAddBrand">添加</div>
                                    <div @click="hideSystemPopup">取消</div>
                                </div>
                            </div> -->
                <div class="addBrandPopup clear" v-show="showAddBrandPopup">
                    <div class="clear">
                        <div class="contentOne">
                            <div class="clear">
                                <span>品牌名称</span>
                                <el-input v-model="AddBrandList.brandNameValue" placeholder="请输入内容"></el-input>
                            </div>
                            <div class="clear">
                                <span>品牌简述</span>
                                <el-input type="textarea" v-model="AddBrandList.brandDescValue" placeholder="请输入内容"></el-input>
                            </div>
                            <div class="clear">
                                <span>公司网址</span>
                                <el-input v-model="AddBrandList.webSiteValue" placeholder="请输入内容"></el-input>
                            </div>
                        </div>
                        <div class="contentTwo">
                            <div class="cropperBox">
                                <vueCropper ref="cropper3" :img="example3.img" :outputSize="example3.outputSize" :canMoveBox="example3.canMoveBox" :canMove="example3.canMove" :autoCrop="example3.autoCrop" :autoCropWidth="example3.autoCropWidth" :autoCropHeight="example3.autoCropHeight"
                                    :fixedBox="example3.fixedBox"></vueCropper>
                            </div>
                            <h3>品牌图片</h3>
                            <div class="tip">请上传200*200分辨率的图片，支持png,jpeg,jpg格式</div>
                            <label class="choosePicture" for="uploads">选择图片</label>
                            <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/jpg" @change="uploadImg($event)">
                        </div>
                    </div>
                    <div class="system-messagebox1-btn clear">
                        <div @click="determineAddBrand">添加</div>
                        <div @click="hideSystemPopup">取消</div>
                    </div>
                </div>
                <!-- 添加品牌成功弹窗 -->
                <div class="okPopup" v-show="showAddBrandOkPopup">
                    <i class="iconfont icon-ok"></i>
                    <h3>添加成功</h3>
                    <div class="system-messagebox1-btn clear">
                        <div @click="hideSystemPopup">确定</div>
                    </div>
                </div>
            </div>
            <!-- 弹窗结束 -->
        </div>
    </div>
</template>

<script>
    import topBar from "../../public/top";
    import leftBar from "../../public/left";
    import homeBar from "../../public/homebar";
    import vueCropper from "vue-cropper";
    export default {
        components: {
            leftBar,
            topBar,
            homeBar,
            vueCropper
        },
        data() {
            return {
                data: "drugManagment",
                currentPage: {
                    path: "/brandlibrary",
                    name: "药品管理"
                },
                tableList: [],
                currentPage4: 1,
                showSystemPopup: false,
                showAddBrandPopup: false,
                systemPopupTitle: "",
                AddBrandList: {
                    brandNameValue: "",
                    brandDescValue: "",
                    webSiteValue: "",
                    imageUrl: ""
                },
                showAddBrandOkPopup: false,
                totalNumOfArticle: 400,
                showLoadingGif: true,
                showPageNum: 1,
                example3: {
                    img: "",
                    autoCrop: true,
                    autoCropWidth: 200,
                    autoCropHeight: 200,
                    fixedBox: true,
                    canMove: true,
                    canMoveBox: false,
                    outputSize: 0.8
                },
            };
        },
        activated() {
            this.getBrand_list();
        },
        methods: {
            //错误弹窗
            messageAlert(msg) {
                this.$message.error(msg);
            },
            getBrand_list() {
                //获取分类列表
                let _this = this;
                let ourls =
                    this.urls +
                    "/who/user/refreshToken/" +
                    localStorage.getItem("uid") +
                    "/" +
                    localStorage.getItem("token");
                checkTime(
                    new Date().getTime() / 1000,
                    ourls,
                    localStorage.getItem("reToken")
                );
                _this.$http
                    .get(
                        _this.urls +
                        "/who/medical/getBrandWithMedical/" +
                        localStorage.getItem("uid") +
                        "/" +
                        localStorage.getItem("token") +
                        "/?page=" +
                        this.showPageNum
                    )
                    .then(function(res) {
                        let data = res.data;
                        if (data.code == 1) {
                            _this.tableList = data.data.brand_list;
                            _this.totalNumOfArticle = data.data.total;
                            _this.showLoadingGif = false;
                            localStorage.setItem("nowTimes", new Date().getTime() / 1000); //检查token失效函数
                        } else {
                            invalid(data.msg); //检查token失效函数
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
            //点击添加品牌
            clickAddBrand() {
                this.showSystemPopup = true;
                this.showAddBrandPopup = true;
                this.systemPopupTitle = "添加品牌";
                this.example3.img =
                    "http://p5vegqhl6.bkt.clouddn.com/2018_04_28_14_40_09_FKmi3j7LdaxWSl8TuFOYmUjlC9DzwbDq.jpg";
            },
            //上传图片
            uploadImg(e) {
                var file = e.target.files[0];
                if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                    alert("图片类型必须是jpeg,jpg,png中的一种");
                    return false;
                }
                var reader = new FileReader();
                // 转化为base64
                reader.onload = e => {
                    this.example3.img = e.target.result;
                };
                reader.readAsDataURL(file);
            },
            //点击裁剪
            finish() {
                let _this = this;
                _this.$refs.cropper3.getCropData(data => {
                    _this.example3.img = data;
                });
            },
            //点击弹窗中的添加
            determineAddBrand() {
                let _this = this;
                let ourls =
                    this.urls +
                    "/adm/user/refreshToken/" +
                    localStorage.getItem("uid") +
                    "/" +
                    localStorage.getItem("token");
                checkTime(
                    new Date().getTime() / 1000,
                    ourls,
                    localStorage.getItem("reToken")
                );
                if (
                    _this.AddBrandList.brandNameValue == "" ||
                    _this.AddBrandList.brandNameValue.length > 15
                ) {
                    _this.$message({
                        showClose: true,
                        message: "品牌名称不能为空或不能长于15位",
                        type: "error"
                    });
                    return;
                }
                if (
                    _this.example3.img ==
                    "http://p5vegqhl6.bkt.clouddn.com/2018_04_28_14_40_09_FKmi3j7LdaxWSl8TuFOYmUjlC9DzwbDq.jpg"
                ) {
                    _this.$message({
                        showClose: true,
                        message: "请上传品牌图片",
                        type: "error"
                    });
                    return;
                }
                this.finish();
                _this
                    .$http({
                        url: _this.urls +
                            "/adm/medical/addBrand/" +
                            localStorage.getItem("uid") +
                            "/" +
                            localStorage.getItem("token"),
                        method: "post",
                        data: {
                            name: _this.AddBrandList.brandNameValue,
                            description: _this.AddBrandList.brandDescValue,
                            url: _this.AddBrandList.webSiteValue,
                            image: _this.example3.img
                        },
                    })
                    .then(function(res) {
                        let data = res.data;
                        if (data.code == 1) {
                            _this.showAddBrandPopup = false;
                            _this.showAddBrandOkPopup = true;
                            _this.systemPopupTitle = "添加成功";
                            localStorage.setItem("nowTimes", new Date().getTime() / 1000);
                        } else {
                            _this.messageAlert(data.msg);
                            invalid(data.msg); //检查token失效
                        }
                    })
                    .catch(function(error) {
                        console.log(error + "sda");
                    });
            },
            //关闭弹窗
            hideSystemPopup() {
                this.showSystemPopup = false;
                this.showAddBrandPopup = false;
                this.showAddBrandOkPopup = false;
                this.systemPopupTitle = "";
                for (var key in this.AddBrandList) {
                    this.AddBrandList[key] = "";
                }
            },
            //品牌图片
            handleAvatarSuccess(res, file) {
                this.AddBrandList.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === "image/jpeg";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error("上传头像图片只能是 JPG 格式!");
                }
                if (!isLt2M) {
                    this.$message.error("上传头像图片大小不能超过 2MB!");
                }
                return isJPG && isLt2M;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.showPageNum = val;
                this.getcategory_list();
            },
            addPath(n1, n2) {
                //点击切换home-bar
                var obj = {};
                obj.n1 = n1;
                obj.n2 = n2;
                this.$store.commit("addPath", obj);
            }
        }
    };
</script>
<style lang="less">
    @import "../css/drugList.less";
</style>
